<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyq
 * @LastEditTime: 2021-09-22 18:02:28
-->
<template>
  <div ref="root" style="height: 100px"></div>
</template>

<script>
import { Bar } from "@antv/g2plot";
import { ref, onMounted } from "vue";
export default {
  setup() {
    let root = ref(null);
    let bar = null;
    const data = [
      {
        country: "白银区",
        year: "1750",
        value: 502,
      },
      {
        country: "白银区",
        year: "1800",
        value: 635,
      },
      {
        country: "白银区",
        year: "1850",
        value: 809,
      },
      {
        country: "白银区",
        year: "1900",
        value: 947,
      },
      {
        country: "白银区",
        year: "1950",
        value: 1402,
      },
      {
        country: "白银区",
        year: "1999",
        value: 3634,
      },
      {
        country: "白银区",
        year: "2050",
        value: 5268,
      },
      {
        country: "靖远县",
        year: "1750",
        value: 106,
      },
      {
        country: "靖远县",
        year: "1800",
        value: 107,
      },
      {
        country: "靖远县",
        year: "1850",
        value: 111,
      },
      {
        country: "靖远县",
        year: "1900",
        value: 133,
      },
      {
        country: "靖远县",
        year: "1950",
        value: 221,
      },
      {
        country: "靖远县",
        year: "1999",
        value: 767,
      },
      {
        country: "靖远县",
        year: "2050",
        value: 1766,
      },
      {
        country: "平川区",
        year: "1750",
        value: 163,
      },
      {
        country: "平川区",
        year: "1800",
        value: 203,
      },
      {
        country: "平川区",
        year: "1850",
        value: 276,
      },
      {
        country: "平川区",
        year: "1900",
        value: 408,
      },
      {
        country: "平川区",
        year: "1950",
        value: 547,
      },
      {
        country: "平川区",
        year: "1999",
        value: 729,
      },
      {
        country: "平川区",
        year: "2050",
        value: 628,
      },
    ];
    let initCharts = () => {
      bar = new Bar(root.value, {
        data,
        xField: "value",
        yField: "year",
        seriesField: "country",
        isPercent: true,
        isStack: true,
        /** 自定义颜色 */
        // color: ['#2582a1', '#f88c24', '#c52125', '#87f4d0'],
        label: {
          position: "middle",
          content: (item) => {
            return item.value.toFixed(2);
          },
          style: {
            fill: "#fff",
          },
        },
      });
      bar.render();
    };
    onMounted(initCharts);
    return {
      root,
    };
  },
};
</script>